<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="../common_head.jsp" %>

	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    
    <link rel="stylesheet" href="/css/onlinedesign/online1.css">
    <link rel="stylesheet" href="/css/onlinedesign/online2.css">

<body>
 <%@include file="../common_nav.jsp" %>

<div id="vue-el">
<!--创建方案-->

<div class="w-1200 margin-0-auto">
	<div class="ogmall_found">
   	  <h1><img src="/img/CVjju.png"/></h1>
     
     <div class="Mjov" id="">
     	 <div class="title">选择户型：</div>
     	 <span v-for="h in houseTypes" v-bind:class="houseTypeId == h.id ? 'Suin' : ''" v-on:click="houseTypeId = h.id">
     	 	{{h.name}}
     	 </span>
     	 <!-- 
     	 <span class="Suin">A户型</span>
     	 <span>B户型</span>
     	 <span>C户型</span>
     	 <span>D户型</span>
     	  -->
     </div>
     
     
     <div class="Mjov" id="Mjov_1">
     	 <div class="title">选择风格：</div>
     	 <span v-for="h in houseStyles" v-bind:class="houseStyleId == h.id ? 'Suin' : ''" v-on:click="houseStyleId = h.id">
     	 	{{h.name}}
     	 </span>
     </div>
     
     <div class="Dkdb" id="Dkdb" v-if="houseTypeId && houseStyleId">
     	
     	<ul style="display: block;">
     		<li v-for="b in recBrands" v-bind:class="recBrandId == b.id ? 'Jouf' : ''" v-on:click="recBrandId = b.id">
     			<div class="IolcM">
     				<img v-bind:src="b.brandHeadImage" alt="" title="" style="height: 280px;">
     			</div>
     			<img v-bind:src="b.brandImage" alt="" title="" style="width: 280px; height: 160px;">
     			<div class="check_ico"></div>
     		</li>
     		<div class="clear"></div>
     	</ul>
     
     </div>
     
     <div class="ApoNc">
     	<a href="javascript:void(0);" class="found_btn" style="float: left;" v-if="showMain == false" v-on:click="next">下一步</a>
     </div>
      
    </div>
</div>

<!--创建结束-->
<div class="clear"></div>




<!--main-->
<div class="w-1200 margin-0-auto" v-if="showMain">
	<div class="ogmall_online">
    	
        <div class="title" id="top_fixed">创建方案</div>
        <!--<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank5"></div>-->
        <ul class="left_nav">
        	<li v-for="(room,index) in rooms" :class="roomIndex == index?'on':'' " v-on:click="scrollTo(index)">{{room.name}}</li>
        	
        	<li class="add" v-on:mouseenter="showList = true" v-on:mouseleave="showList = false">
            	<a href="#">自定义</a>
                <dl v-if="showList">
                	<dd v-for="r in rooms" v-on:click="addSpace(r)">{{r.name}}</dd>
                </dl>
            </li>
        </ul>
        <div class="blank10"></div><div class="blank10"></div>
        <!--left-->
        <div class="left_pz">
        	<h1>配置单</h1>
            <dl v-for="(room, index) in rooms">
            	<div>
            	<dt>
            		<span>{{room.name}}</span> <em>共<i>{{total2(index)}}</i>件，<i>{{totalPrice2(index)}}</i>元</em> <b></b>
            	</dt> 
            	<dd>
            		<div class="li" v-for="(sb, sbIndex) in room.items">
            			<div class="list">
	            			<div class="img"><img v-bind:src="sb.img">
	            			</div> <!----> 
            				<div class="tit">{{sb.name}}</div>
            				<div class="jj" v-if="sb.count > 0"><span v-on:click="if (sb.count > 1) sb.count = sb.count - 1">-</span><em>{{sb.count}}</em><span v-on:click="sb.count = sb.count + 1">+</span></div> 
            				<div class="r" v-if="sb.count == 0"><a href="javascript:void(0);" v-on:click="changeSb(index, sbIndex)">添加</a></div>
            				<div class="r" v-if="sb.count > 0">￥{{sb.price*sb.count}}<i v-on:click="resetSb(index, sbIndex)">X</i></div>
            		 	</div>
            		</div>

								<div class="li">
									<div class="list">
										<div class="img">
											<img src="${ctx }/img/zdy_ico.png">
										</div>
										<!---->
										<div class="tit">自定义</div>
										<div id="showbox" class="r">
											<a href="javascript:void(0);" class="add" v-on:click="setShowCustom(index)">&nbsp;</a>
											<div class="xx-box" v-bind:style="room.showCustom ? 'display: block;' : 'display:none;'">
												<div class="TIOnwr">选择自定义:</div>
												<ul id="onxl">
													<li class="" v-for="c in customCategories" v-on:click="addCustom(index, c)">{{c}}</li>
													<!-- 
													<li>花艺</li>
													<li>饰品</li>
													<li>挂画</li>
													<li>布艺家纺</li>
													<li>地毯</li>
													<li>摆件</li>
													 -->
												</ul>
											</div>
										</div>
									</div>
								</div></dl>
            
            <div class="total">
            	<div class="fl">共计{{total}}项</div>
                <div class="fr">合计<b>￥{{totalPrice}}</b></div>
            </div>
            <div class="release">
            	<h2>方案名称：</h2>
                <input name="" type="text" class="input" id="design-name">
                <h2>选用面积：</h2>
                <input name="" type="text" class="input" id="area">
                <input name="" type="button" value="发布" class="btn2" onclick="save(true)">
                <!-- 
                <input name="" type="button" value="返回" class="btn1">
                <input name="" type="button" value="保存" class="btn3" onclick="save(false)">
                 -->
            </div>
        </div>
        <!--left END-->
        <!--right-->
        <!--刷选-->
        <div class="right_list">
            <div class="choice">
                <div class="tit">
                	<h2>请选择<b>家具</b></h2>
                    <div class="search">
                        <input type="text" class="t" v-model="searchTerm" placeholder="请输入编码或产品名"/>
                        <input name="" type="button" class="search_icon">
                    </div>
                </div>
                <div class="lb">
                <em>推荐品牌：</em>
                <span><a href="javascript:void(0);" class="on" v-on:click="brandId = null">全部</a></span>
                <ul>
                    <li v-for="b in brands">
                    	<a href="javascript:void(0);" v-bind:class="brandId == b.id ? 'on' : ''" v-on:click="updateBrand(b.id)">{{b.name }}</a>
                    </li>
                </ul>
                </div>
                <div class="lb">
                <em>价钱区间：</em>
                <span><a href="javascript:void(0);" class="on" v-on:click="priceId = null">全部</a></span>
                <ul>
                    <li v-for="p in prices">
                    <a href="javascript:void(0);" v-bind:class="priceId == p.id ? 'on' : ''" v-on:click="priceId = p.id">{{p.min}} {{p.max ? '-' + p.max : '以上'}}</a>
                    </li>
                </ul>
                </div>
            </div>
        
        <!--刷选 END-->
        <div class="blank10"></div><div class="blank10"></div>
        <!--list-->
        <div class="top_choice">
        	<ul>
            	<li><a href="javascript:void(0);" v-bind:class="orderBy=='p.totalSold desc' ? 'on' : ''"  v-on:click="orderBy='p.totalSold desc'">最热门</a></li>
                <li><a href="javascript:void(0);" v-bind:class="(orderBy=='sellingPrice desc' || orderBy == 'sellingPrice asc')? 'on' : ''" v-on:click="orderBy=='sellingPrice desc' ? orderBy='sellingPrice asc' : orderBy='sellingPrice desc'">价格&nbsp; <span v-if="orderBy=='sellingPrice desc'">↓</span>
                <span  v-if="orderBy=='sellingPrice asc'">↑</span></a></li>
                <li><a href="javascript:void(0);" v-bind:class="orderBy=='p.lastUpdateTime desc' ? 'on' : ''" v-on:click="orderBy='p.lastUpdateTime desc'">最新</a></li>
            </ul>
            <div class="r" v-if="products.totalRecords && products.totalRecords > 0">共<i>{{products.totalRecords}}</i>款产品&nbsp;&nbsp;
            <b v-if="page > 1" v-on:click="page = page - 1"><</b>
            {{page}}/{{products.totalPages}}
            <b v-if="page < products.totalPages" v-on:click="page = page + 1">></b>
            </div>
        </div>
        <div class="pro_list">
        	<ul>
            	<li v-for="p in products.data">
                	<div class="img"><a v-bind:href="'${ctx }/product/detail?id=' + p.id" target="_blank"><img v-bind:src="p.specs[p.specIndex].image"></a></div>
                    <div class="l1">
                    	<h2><a href="#">{{p.name}}</a></h2>
                        <p><em>风格：</em>{{p.specs[p.specIndex].style}}<br><em>材质：</em>{{p.specs[p.specIndex].material}}<br><em>颜色：</em>{{p.specs[p.specIndex].color}}</p>
                    </div>
                    <div class="l2">规格：</div>
                    <div class="l3">
                    	<p v-for="(s,idx) in p.specs" v-bind:class="idx == p.specIndex ? 'on' : ''" v-on:click="p.specIndex = idx">{{s.spec1}}</p>
                    </div>
                    <div class="l4">
                    	<p>￥{{p.specs[p.specIndex].realPrice}}</p>
                        <a href="javascript:void(0);" class="pro_btn" v-bind:data-id="p.specs[p.specIndex].id" onclick="addProduct(this)">+加入配置单</a>
                    </div>
                </li>
            </ul>
        </div>
        <!--list END-->
        <!--page-->
        	<div class="ogmall_page" v-if="products.totalRecords && products.totalRecords > 0">
        		<a href="javascript:void(0);" v-if="page > 1" v-on:click="page = page - 1">上一页</a>
					{{page}}/{{products.totalPages}}
        		<a href="javascript:void(0);" v-if="page < products.totalPages" v-on:click="page = page + 1">下一页</a>
        	</div>
        <!--page END-->
        </div>
        <!--right END-->
    </div>
</div>
<!--main END-->
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="bottom-warp w-100p">
     <%@include file="../foot.jsp" %>
</div>
<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx}/js/item-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/config-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/add-comp.js"></script>
<script type="text/javascript" src="${ctx}/js/main.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.json.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	init();
});

/*
var bl=true;
$('.left_pz').on('click','#showbox',function(){
	$('.xx-box').hide();
	if(bl){
		bl=false;
		$(this).find('.xx-box').show();
	}else{
		bl=true;
		$(this).find('.xx-box').hide();
	}
	
}); */


var houseTypeId = '';
var houseStyleImage = '';
function init() {
	$(".choice li").click(function(){
		$(this).addClass("on").siblings().removeClass("on");
		//tola();
	/*
		if ($(this).attr('data-type') == 'houseType') {
			houseTypeId = $(this).attr('data-value');
		}
		if ($(this).attr('data-type') == 'houseStyle') {
			houseStyleImage = $(this).attr('data-value');
		}
		*/
	}); 
}

$('#community').change(function() {
	var id = $(this).val();
	if (id == '') {
		return;
	}
	$.ajax({
		url: "${ctx}/design/getHouseType",
		data: {
			id: id
		},
		dataType: "json",
		success: function(data) {
			$('#houseType-ul').empty();
			for (var i = 0; i < data.data.length; i++) {
				var li = '<li data-type="houseType" data-value="' + data.data[i].houseTypeId + '"><img src="' + data.data[i].image + '"><p>' + data.data[i].name + '</p></li>';
				$('#houseType-ul').append(li);
			}
			init();
		}
	});
});

$('#houseStyle').change(function() {
	var id = $(this).val();
	if (id == '') {
		return;
	}
	$.ajax({
		url: "${ctx}/design/getHouseStyleImages",
		data: {
			id: id
		},
		dataType: "json",
		success: function(data) {
			$('#houseStyle-ul').empty();
			for (var i = 0; i < data.data.length; i++) {
				var li = '<li data-type="houseStyle" data-value="' + data.data[i].image + '"><img src="' + data.data[i].image + '"><h2>' + data.data[i].name + '</h2></li>';
				$('#houseStyle-ul').append(li);
			}
			init();
		}
	});
});

// 下一步
function goNext() {
	var communityId = $('#community').val();
	var houseStyleId = $('#houseStyle').val();
	if (communityId == '') {
		error("请选择楼盘");
		return;
	}
	if (houseTypeId == '') {
		error("请选择户型");
		return;
	}
	if (houseStyleId == '' || houseStyleImage == '') {
		error("请选择风格图片");
		return;
	}
	location = '${ctx}/design/online2?communityId=' + communityId + "&houseTypeId=" + houseTypeId + "&houseStyleId=" + houseStyleId + "&houseStyleImage=" + houseStyleImage;
}
</script>

</body>
</html>
